<template>
  <div class="cart-bottom-bar">
    <div class="check-box">
      <check-button class="check-button" :is-check="isCheckAll" @click.native="checkAll" />
      <span>全选</span>
    </div>
    <div class="total-price">总价：{{ totalPrice }}</div>
    <div class="go-compute">去计算({{ cartCheckCount }})</div>
  </div>
</template>

<script>
import checkButton from "./check-button";

import { mapGetters } from "vuex";
export default {
  name: "cartBottomBar",
  data() {
    return {};
  },
  components: {
    checkButton
  },
  computed: {
    // 获取是否全选的状态（有一个没有被选中，则不是全选）
    isCheckAll() {
      if (this.cartList.length != 0) {
        return !this.cartList.find(item => {
          return !item.checked;
        });
      }
      return false;
    },
    totalPrice() {
      return (
        "￥" +
        this.$store.state.cartList
          .filter(item => {
            return item.checked === true;
          })
          .reduce((preValue, item) => {
            return preValue + item.count * item.lowNowPrice;
          }, 0)
          .toFixed(2)
      );
    },
    ...mapGetters(["cartCheckCount", "cartList"])
  },
  methods: {
    // 点击全选（有一个没有选中，则全选；全选则改为全不选）
    checkAll() {
      if (this.isCheckAll) {
        this.cartList.forEach(item => {
          item.checked = false;
        });
      } else {
        this.cartList.forEach(item => {
          item.checked = true;
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.cart-bottom-bar {
  position: absolute;
  bottom: 49px;
  left: 0;
  right: 0;
  height: 40px;
  background-color: #dedede;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  .check-box {
    padding-left: 5px;
    width: 60px;
    display: flex;
    .check-button {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .total-price {
    flex: 1;
    padding-left: 15px;
  }
  .go-compute {
    background: var(--color-tint);
    height: 40px;
    line-height: 40px;
    width: 90px;
    text-align: center;
    color: #fff;
  }
}
</style>